<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>客户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/resources/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/resources/layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css"
          media="all">
    <link rel="stylesheet" href="/resources/layuimini/css/public.css" media="all">
</head>
<body>
<!-- 查询条件开始 -->
<blockquote class="layui-elem-quote">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item">
            <div class="layui-inline" id="realname">
                <label class="layui-form-label">业务员</label>
                <div class="layui-input-inline">
                    <select name="userId" id="searchUserId">
                        <option value="">请选择业务员</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入客户姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" placeholder="请输入客户电话" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <input type="button" value="查询" class="layui-btn" lay-submit id="doSearch" lay-filter="doSearch">
                <input type="reset" value="重置" class="layui-btn layui-btn-danger">
            </div>
        </div>
    </form>
</blockquote>
<!-- 查询条件结束-->

<!-- 数据表格开始 -->
<div>
    <table class="layui-hide" id="customerTable" lay-filter="customerTable"></table>
    <script type="text/html" id="customerTableToolbar">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" id="changeUser" lay-event="changeUser">转移客户</button>
    </script>
    <script type="text/html" id="customerTableBar">
        <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="viewVisitLog">查看拜访记录</a>
    </script>
</div>
<!-- 数据表格结束-->

<!-- 弹出层开始 -->
<div id="addOrUpdateForm" style="display: none;margin: 5px">
    <form class="layui-form" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">客户姓名</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="name" lay-verify="required" placeholder="请输入登陆名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" lay-verify="required" placeholder="请输入真实姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户公司</label>
            <div class="layui-input-block">
                <input type="text" name="company" lay-verify="required" placeholder="请输入真实姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" checked value="1" title="男">
                <input type="radio" name="sex" value="0" title="女">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <input type="button" value="提交" class="layui-btn" lay-submit id="doSubmit" lay-filter="doSubmit">
            <input type="reset" value="重置" id="doReset" class="layui-btn layui-btn-danger">
        </div>
    </form>
</div>
<!-- 弹出层结束-->
<!--转移客户弹出层开始-->
<div id="changeCustomerUserForm" style="display: none;margin: 5px">
    <form class="layui-form">
        <div class="layui-form-item" id="userRadioDiv">
        </div>
        <div class="layui-form-item" style="text-align: center">
            <input type="button" value="提交" class="layui-btn" lay-submit id="doChange" lay-filter="doChange">
        </div>
    </form>
</div>
<!--转移客户弹出层结束-->
<!--查看拜访记录弹出层开始-->
<div id="viewVisitDiv" style="display: none;margin: 5px">
    <div class="layui-panel">
        <form class="layui-form" id="viewVisitFrm" lay-filter="viewVisitFrm">
            <div class="layui-form-item">
                <label class="layui-form-label">拜访时间</label>
                <div class="layui-input-block">
                    <input type="text" id="visitTime" name="visitTime" lay-verify="required" placeholder="请选择拜访时间"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">拜访内容</label>
                <div class="layui-input-block">
                    <textarea name="descp" lay-verify="required" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center">
                <input type="button" value="保存" class="layui-btn" lay-submit id="doAdd" lay-filter="doAdd">
            </div>
        </form>
    </div>
    <div class="layui-panel">
        <table class="layui-hide" id="viewVisitTable" lay-filter="viewVisitTable"></table>
    </div>
</div>
<!--查看拜访记录弹出层结束-->

</body>
<script src="/resources/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/resources/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['jquery', 'table', 'layer', 'form', 'laydate'], function () {
        let $ = layui.jquery;
        let table = layui.table;
        let layer = layui.layer;
        let form = layui.form;
        let laydate = layui.laydate;

        //请求查询条件里面的业务员
        $.get("/user/queryAllAvailableUser.do", function (res) {
            let data = res.data;
            if (data) {
                let html = '<option value="">请选择业务员</option>'
                $.each(data, function (i, item) {
                    html += '<option value="' + item.id + '">' + item.realname + '</option>'
                });
                $("#searchUserId").html(html);
                form.render("select");
            }
        });

        //渲染数据表格
        let customerTable = table.render({
            elem: '#customerTable'
            , url: '/customer/list.do'
            , toolbar: '#customerTableToolbar' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print']
            , title: '客户数据表' //导出excel的文件名
            , cols: [ [
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', align: "center", fixed: "left"}
                , {field: 'name', title: '客户姓名', align: "center", width: '150'}
                , {field: 'phone', title: '电话', align: "center", width: '150'}
                , {field: 'realname', title: '所属业务员', align: "center", width: '150'}
                , {
                    field: 'sex', title: '性别', align: "center", width: '150', templet: function (res) {
                        if (res.sex == 1) {
                            return "<font color='blue'>男</font>"
                        } else if (res.sex == 0) {
                            return "<font color='green'>女</font>"
                        }
                        return '未知'
                    }
                }
                , {field: 'company', title: '公司', align: "center", width: '150'}
                , {field: 'createTime', title: '创建时间', align: "center", width: '180'}
                , {field: 'updateTime', title: '更新时间', align: "center", width: '180'}
                , {field: 'deletedTime', title: '离职时间', align: "center", width: '180'}
                , {fixed: 'right', title: '操作', toolbar: '#customerTableBar', width: '260', align: "center"}
            ] ]
            , page: true
            , done: function () {
                let role = [[${session.user.role}]];
                if (role == 2) {
                    document.getElementById("realname").style = "display: none";
                    document.getElementById("changeUser").style = "display: none";
                }
            }
        });

        //监听模糊查询
        form.on("submit(doSearch)", function (obj) {
            let data = obj.field;
            //刷新表格把数据传过去
            customerTable.reload({
                where: data
            })
            return false;
        })
        //监听表头的事件
        table.on("toolbar(customerTable)", function (obj) {
            switch (obj.event) {
                case 'add':
                    openAddLayer();//打开添加的弹出层
                    break;
                case 'changeUser':
                    openChangeUserLayer();
                    break;
            }
        });
        //监听行工具条的事件
        table.on('tool(customerTable)', function (obj) {
            switch (obj.event) {
                case 'update':
                    openUpdateLayer(obj.data)
                    break;
                case 'del':
                    layer.confirm("你确定要删除客户【" + obj.data.name + "】吗？", {icon: 3, title: "提示"}, function () {
                        $.post("/customer/del.do", {id: obj.data.id}, function (res) {
                            layer.msg(res.msg);
                            if (res.code == 200) {
                                customerTable.reload();
                            }
                        });
                    });
                    break;
                case 'viewVisitLog':
                    $.post("/customer/setSession.do", {
                        'id': obj.data.id,
                        'userId': obj.data.userId,
                        'name': obj.data.name,
                        'realname': obj.data.realname
                    }, function (res) {
                        console.log(res.msg);
                    })
                    openViewVisitLayer(obj.data);
                    break;
            }
        });

        //打开添加的弹出层的方法
        let url; //提交的URL
        let mainIndex; //当前弹出层的index
        function openAddLayer() {
            mainIndex = layer.open({
                type: 1,//页面层
                title: '添加客户',
                content: $("#addOrUpdateForm"),
                area: ['400px', '400px'],
                success: function () {
                    $("#doReset").click();
                    url = "/customer/add.do";
                }
            })
        }

        //打开修改的弹出层的方法
        function openUpdateLayer(data) {
            mainIndex = layer.open({
                type: 1,//页面层
                title: '修改[' + data.name + ']客户',
                content: $("#addOrUpdateForm"),
                area: ['400px', '300px'],
                success: function () {
                    //回显数据
                    form.val('dataFrm', data);
                    url = "/customer/update.do";
                }
            })
        }

        //监听提交事件
        form.on("submit(doSubmit)", function (obj) {
            let data = obj.field;
            //提交
            $.post(url, data, function (res) {
                layer.msg(res.msg);
                if (res.code == 200) {
                    //刷新表格
                    customerTable.reload();
                    //关闭弹出层
                    layer.close(mainIndex);
                }
            })
            //提前阻止表单提交
            return false;
        });

        //打开转移客户的弹出层方法
        function openChangeUserLayer() {
            let data = table.checkStatus('customerTable').data;
            if (data.length <= 0) {
                layer.msg("请至少选择一个要转移的客户！");
                return;
            }
            mainIndex = layer.open({
                type: 1,//页面层
                title: '转移选中客户',
                content: $("#changeCustomerUserForm"),
                area: ['600px', '300px'],
                success: function () {
                    $.get("/user/queryAllAvailableUser.do", function (res) {
                        let data = res.data;
                        if (data) {
                            let s = "";
                            $.each(data, function (i, item) {
                                s += '<input type="radio" name="userId" value="' + item.id + '" title="' + item.realname + '">';
                            });
                            $("#userRadioDiv").html(s);
                            form.render('radio');
                        }
                    })
                }
            })
        }

        //监听转移客户层里的提交按钮
        form.on("submit(doChange)", function (obj) {
            let userId = obj.field.userId;
            if (userId) {
                let data2 = table.checkStatus('customerTable').data;
                let params = "userId=" + userId;
                $.each(data2, function (i, item) {
                    params += "&customerIds=" + item.id;
                })
                $.post("/customer/changeCustomerUser.do", params, function (res) {
                    layer.msg(res.msg);
                    if (res.code == 200) {
                        customerTable.reload();
                        layer.close(mainIndex);
                    }
                })
            } else {
                layer.msg("请选择要转移的业务员")
            }
            //提前阻止表单提交
            return false;
        })

        //打开查看拜访记录弹出层方法
        function openViewVisitLayer(data) {
            mainIndex = layer.open({
                type: 1,//页面层
                title: '查看【' + data.name + '】客户的拜访记录档案',
                content: $("#viewVisitDiv"),
                area: ['800px', '600px'],
                success: function () {
                    laydate.render({
                        elem: "#visitTime",
                        type: "datetime"
                    })
                    let viewVisitTable = table.render({
                        elem: '#viewVisitTable'
                        , url: '/visitLog/list.do'
                        , title: '拜访数据表' //导出excel的文件名
                        , cols: [ [
                            {field: 'realname', title: '业务员', align: "center"}
                            , {field: 'descp', title: '拜访内容', align: "center"}
                            , {field: 'visitTime', title: '拜访时间', align: "center"}
                            , {field: 'createTime', title: '创建时间', align: "center"}
                        ] ]
                        , page: true
                    });
                    //监听提交拜访记录按钮
                    form.on("submit(doAdd)", function (obj) {
                        console.log(obj.field);
                        $.post("/visitLog/add.do", obj.field, function (res) {
                            layer.msg(res.msg);
                            if (res.code == 200) {
                                viewVisitTable.reload();
                                document.getElementById("viewVisitFrm").reset();
                            }
                        })
                        return false;
                    })
                }
            })
        }
    });
</script>
</html>